<template>
      <div>
          <div class="mymenu_body">
          <div class="menu_body" v-for="(item, index) in res" :key="index">
            <div><el-image :src="item.pic" lazy></el-image></div>
            <h1>{{ item.name }}</h1>
            <h2>需求时间：{{ item.cookingtime }}</h2>
            <h3>{{ item.tag}}</h3>
          </div>
        </div>
        <div class="drop-down">
           <el-button type="success" size="big" round icon="el-icon-download" @click="dropdown">是否加载更多的数据!</el-button>
        </div>
        
      </div>
</template>

<script>
export default {
  data() {
    return {
      res: [],
      num:20
    };
  },
  methods: {
    axios() {
      var url = `/byclass?classid=${this.chuan}&start=0&num=${this.num}&appkey=1121b1761b010916`;
      this.$axios.get(url).then((res) => {
        console.log(res.data.result.list);
        this.res = res.data.result.list;
      });
    },
    dropdown(){
       this.num+=4;
      this.axios();
      console.log(this.num);
    }
  },
  props: ["chuan"],
  mounted() {
    this.axios();
  },
  watch: {
    chuan() {
      this.axios();
    },
  },
};
</script>

<style>
.mymenu_body {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.menu_body {
  width: 230xp;
  margin: 20px 10px;
}
.menu_body img {
  border-radius: 10px;
}
.el-image:hover {
  transform: scale(1.05, 1.05);
  transition: transform 0.3s;
  cursor: pointer;
  border-radius: 10px;
}
.menu_body h1{
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
  color: #333;
}
.menu_body h2{
  margin:5px 8px;
  font-size: 12px;
  color: #666;
 
}
.menu_body h3{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 230px;
   font-size: 16px;
}
.drop-down{
  text-align: center;
  margin: 10px;
}

</style>